<template>
  <div class="block">
    <el-container>
      <div class="el-main" style="display: flex; justify-content: space-between; gap: 20px; height: 100%;">
        <!-- 左侧查询条件部分 -->
        <div class="container-top" style="flex: 1;">
          <div class="block block-custom">
            <!-- 查询条件部分 -->
            <div style="margin-top: 10px; margin-left: 10px;">
              <label class="label-text">站场名称</label>
              <el-select v-model="queryData.station" placeholder="请选择" clearable style="width: 90px" class="filter-item">
                <el-option v-for="(item, index) in stationNameOptions" :key="index" :label="item" :value="item" />
              </el-select>

              <label class="label-text">机车号</label>
              <el-input v-model.trim="queryData.dj" placeholder="请输入" style="width: 90px;" class="filter-item" />

              <label class="label-text">开始时间</label>
              <el-date-picker v-model="queryData.startTime" type="datetime" placeholder="选择日期时间" placement="bottom-start">
              </el-date-picker>

              <label class="label-text">结束时间</label>
              <el-date-picker v-model="queryData.endTime" type="datetime" placeholder="选择日期时间" placement="bottom-start">
              </el-date-picker>

              <el-button @click="reset">
                重置
              </el-button>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">
                查询
              </el-button>
            </div>
            <common-table
                :queryData="queryData"
                :columns="columns"
                :fetchData="fetchData"
                ref="table"
              > 
                <template #append>
                  <el-table-column label="操作" align="center" width="145">
                    <template slot-scope="scope">
                      <el-button type="text" @click="openDetail(scope.row)">查看</el-button>
                    </template>
                  </el-table-column>
                </template>
              </common-table>
          </div>
        </div>

        <!-- 右侧图表部分 -->
        <div class="container-top" style="width: 500px; height: 800px;">
          <div class="block block-custom" style="width: 500px; height: 800px;">
            <!-- 饼图容器 -->
            <div ref="pieChart" style="width: 100%; height: 40%;"></div>
            <div ref="pieChart2" style="width: 100%; height: 40%;"></div>
          </div>
        </div>
      </div>
    </el-container>
    <!-- 弹框部分 -->
    <el-dialog :visible.sync="dialogFormVisible" custom-class="custom-table">
      <common-table
        :columns="columns1"
        :showPagination="false"
        :fetchData="fetchDataDeaild"
        ref="table"
      >
      </common-table>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'; // 导入 echarts 库
import CommonTable from './commonTable.vue';
import { getStationNames } from "@/api/dataQuery"; 
import { getDataJobTicket, getDataPieChartData, postShiftPlanDepart } from "@/api/statistics";

export default {
  components: {
    CommonTable
  },
  data() {
    return {
      queryData: { 
        dj: '',
        station: '',
        startTime: new Date(new Date().getTime() - 3600 * 1000 * 24),
        endTime: new Date(new Date().getTime()),
      },
      stationNameOptions: [],
      dialogFormVisible: false,
      pieData: [ // 饼图数据
        [
          { name: '圣彼得堡来客', value: 5.6 },
          { name: '陀思妥耶夫斯基全集', value: 1 },
          { name: '史记精注全译（全6册）', value: 0.8 },
          { name: '加德纳艺术通史', value: 0.5 },
          { name: '表象与本质', value: 0.5 },
          { name: '其它', value: 3.8 }
        ]
      ],
      pieData2: [ // 饼图数据
        [
          { name: '银河帝国5：迈向基地', value: 3.8 },
          { name: '俞军产品方法论', value: 2.3 },
          { name: '艺术的逃难', value: 2.2 },
          { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
          { name: 'Scrum 精髓', value: 1.2 },
          { name: '其它', value: 5.7 }
        ]
      ],
      columns: [
        { prop: 'station', label: '站场名称', width: '80' },
        { prop: 'workItemNo', label: '作业单', width: '150' },
        { prop: 'shuntNum', label: '勾数', width: '150' },
        { prop: 'locmotiveNo', label: '机车号', width: '150' },
        { prop: 'zyxm', label: '编组', width: '150' },
        { prop: 'beginTime', label: '空间走行时间', width: '145' },
        { prop: 'endTime', label: '作业计划结束时间', width: '150' },
        { prop: 'beginTime', label: '空间走行时间', width: '145' },
        { prop: 'endTime', label: '作业计划结束时间', width: '150' }
      ],
      columns1: [
        { prop: 'hungNo', label: '勾号', width: '80' },
        { prop: 'gdName', label: '股道名称', width: '150' },
        { prop: 'workMethod', label: '作业类型', width: '150' },
        { prop: 'numOfTrain', label: '车数', width: '145' },
        { prop: 'hungState', label: '勾状态', width: '150' },
        { prop: 'tip', label: '备注', width: '150' }
      ]
    }
  },
  mounted() {
    // this.initPieChart(); // 初始化饼图
    this.getAllStationNames()
    // this.initPieChart2(); // 初始化饼图
  },
  methods: {
    initPieChart(dom, datas) {
      const chart = echarts.init(dom); // 初始化echarts实例
      const option = {
        title: {
          text: datas.title,
          left: 'center',
          textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 20
          }
        },
        series: [ {
            type: 'pie',
            radius: [20, 80],
            top: `${top}%`, // 设置 top，使每个饼图位于不同的位置
            height: '50%', // 设置高度
            left: 'center',
            width: '80%',
            // itemStyle: {
            //   borderColor: '#fff',
            //   borderWidth: 1
            // },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 0,
              // 也可以在这里为单个数据项配置颜色
              color: function(params) {
                const colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
                return colorList[params.dataIndex];
              }
            },

            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c} 勾}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < chart.getWidth() / 2;
              const points = params.labelLinePoints;
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },

            data: (datas.data || []).map(v => {
              return {
                name: v.label,
                value: v.value
              }
            })
          }]
      };
      chart.setOption(option); // 设置图表配置
    },
    openDetail(row) {
      this.dialogFormVisible = true;
      this.editRow = row
    },
    fetchDataDeaild () {
      return {
          code:0 ,
          data: this.editRow.hungItemList
      }
    },
    async fetchData(params) {
      const {data, code} = await getDataPieChartData(params)
      if (code === 0) {
        let data1 = data[0] || {}
       
        let data2 = data[1] || {}
        // data1 = data1.data ? [data1.data]: []
        // data2 = data2.data ? [data2.data]: []
        this.initPieChart(this.$refs.pieChart, data1); // 初始化饼图
        this.initPieChart(this.$refs.pieChart2, data2); // 初始化饼图
      }
      const res = await getDataJobTicket(params);
      if (res.code === 0) {
          return {
              code: 0,
              data: res.data.map(v => {
                  return {
                    ...v,
                    ...v.workItem
                  }
              }),
              total: res.total
          }
      }
    },
    async getAllStationNames() {
      this.stationNameOptions = []
      const res = await getStationNames()
      if (res.msg) {
        this.$message.info(res.msg)
      } else {
        this.stationNameOptions = res.data
      }
    },
    async postDepart() {
      const res = await postShiftPlanDepart(this.postData)
      if (res.code === 0) {
        this.$message.success('修改成功！')
      }
    },
    reset() {
      // this.totalDataLength = 0
      // this.rcvTableData = []
      this.queryData.startTime = new Date(new Date().getTime() - 3600 * 1000 * 24)
      this.queryData.endTime = new Date(new Date().getTime())
      this.queryData.station = ''
    },
    search() {
      // this.getShiftPlanInfo()
      this.$refs.table.getTableData()
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../style.scss';
</style>

<style>
.custom-table .el-table thead {
  color: black !important;
}
.custom-table .el-table {
  color: black !important;
}
</style>
